<template>
  <div class="shop-wrapper">
    <div class="content">
      <div class="top">
        <div class="title-wrapper">
          <div
            v-for="(item, index) of title"
            :key="index"
            class="title"
            @click="titleClick(index)"
          >{{ item }}</div>
        </div>
      </div>
      <div class="middle">
        <div v-if="isShow" class="totle">￥{{ status === 'user' ? userSales : shopSales }}</div>
        <Input ref="searchInput" :placeholder="placeholder" class="input-cls" @search="handleSearch" />
        <el-date-picker
          v-if="isShow"
          v-model="value"
          clearable
          type="daterange"
          align="right"
          unlink-panels
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          :picker-options="pickerOptions"
          format="yyyy 年 MM 月 dd 日"
          value-format="yyyy-MM-dd"
          @change="handleChange"
        />
      </div>
      <div class="bottom">
        <component :is="cmpName" :id="id" :exits-goods-list="exitsGoodsList" :assistant-list="assistantList" :status="status" :total-sale="totalSale" :shop-list="shopList" :goods-list="goodsList" @storesClick="handleStoresClick" @totalSale="handleTotalSale" />
      </div>
    </div>
    <Pagination class="pagination" :cur-page="currentPage" :total="total" :page-size="pageSize" @nextPage="handleNextPage" />
  </div>
</template>
<script>
import Input from '@/common/input'
import TableList from './shopList/tableList'
import Assistant from './shopList/assistant'
import ExistGoods from './shopList/existGoods'
import TotalSale from './shopList/totalSale'
import Pagination from '@/common/pagination'
import { getShopList, getEarningDetail, getAssistantList, getShopExistGoods } from '@/api/shop'
const ERR_OK = 200
export default {
  components: {
    Input,
    TableList,
    Assistant,
    ExistGoods,
    TotalSale,
    Pagination
  },
  data() {
    return {
      placeholder: '请输入业务员姓名/手机号',
      cmpName: TableList,
      title: ['店铺列表'],
      pickerOptions: {
        shortcuts: [
          {
            text: '最近一周',
            onClick(picker) {
              const end = new Date()
              const start = new Date()
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
              picker.$emit('pick', [start, end])
            }
          },
          {
            text: '最近一个月',
            onClick(picker) {
              const end = new Date()
              const start = new Date()
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)
              picker.$emit('pick', [start, end])
            }
          },
          {
            text: '最近三个月',
            onClick(picker) {
              const end = new Date()
              const start = new Date()
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90)
              picker.$emit('pick', [start, end])
            }
          }
        ]
      },
      value: [],
      shopList: [],
      goodsList: [],
      assistantList: [],
      exitsGoodsList: [],
      total: 0,
      pageSize: 0,
      page: 1,
      currentPage: 1,
      query: '',
      totalSale: '',
      id: '',
      status: '',
      userSales: 0,
      shopSales: 0,
      tabName: '',
      totalSale_id: '',
      start_time: '',
      end_time: ''
    }
  },
  computed: {
    isShow() {
      return this.cmpName === TotalSale
    }
  },
  mounted() {
    this._getShopList()
  },
  methods: {
    handleTotalSale(name, id) {
      this.cmpName = TotalSale
      this.totalSale_id = id
      this.totalSale = name
      this._getEarningDetail({ page: this.page, id, status: 'user' })
        .then(() => {
          this.goodsList.forEach((item, index) => {
            this.userSales += parseInt(item.user_earnings)
          })
        })
    },
    handleStoresClick(scope, title, id) {
      this.clear()
      this.page = 1
      this.id = id
      this.tabName = title
      this.placeholder = '请输入订单号'
      switch (title) {
        case '店员':
          this.cmpName = Assistant
          this.status = 'user'
          this._getAssistantList({ page: this.page, id: this.id })
          break
        case '现有商品':
          this.cmpName = ExistGoods
          this._getShopExistGoods({ page: this.page, id: this.id })
          break
        case '总销售额':
          this.cmpName = TotalSale
          this.totalSale = 'allSales'
          this.status = 'shop'
          this.shopSales = 0
          this._getEarningDetail({ page: this.page, id, status: 'shop' })
            .then(() => {
              this.goodsList.forEach((item, index) => {
                this.shopSales += parseInt(item.payment)
              })
            })
          break
        case '总收益':
          this.cmpName = TotalSale
          this.totalSale = 'allEarning'
          this.status = 'shop'
          this.shopSales = 0
          this._getEarningDetail({ page: this.page, id, status: 'shop' })
            .then(() => {
              this.goodsList.forEach((item, index) => {
                this.shopSales += parseInt(item.shop_earnings)
              })
            })
          break
      }
      if (this.title.length > 1) {
        this.title.splice(1, 1)
      }
      this.title.push('/' + scope.row.name + scope.row.nickname)
    },
    handleChange(time) {
      console.log(time)
      if (time) {
        this.start_time = time[0]
        this.end_time = time[1]
        this.page = 1
        this.currentPage = 1
        if (this.status === 'user') {
          this._getEarningDetail({ condition: this.query, page: this.page, start_time: this.start_time, end_time: this.end_time, id: this.totalSale_id, status: 'user' })
        } else if (this.status === 'shop') {
          this._getEarningDetail({ condition: this.query, page: this.page, start_time: this.start_time, end_time: this.end_time, id: this.id, status: 'shop' })
        }
      } else {
        this.page = 1
        this.currentPage = 1
        if (this.status === 'user') {
          this._getEarningDetail({ condition: this.query, page: this.page, id: this.totalSale_id, status: 'user' })
        } else if (this.status === 'shop') {
          this._getEarningDetail({ condition: this.query, page: this.page, id: this.id, status: 'shop' })
        }
      }
    },
    handleSearch(query) {
      this.query = query
      this.page = 1
      this.currentPage = 1
      this.value = []
      this.shopSales = 0
      switch (this.tabName) {
        case '店员':
          this._getAssistantList({ page: this.page, id: this.id, condition: this.query })
          if (this.totalSale === 'assistantTotalSale') {
            this._getEarningDetail({ page: this.page, id: this.totalSale_id, status: 'user', condition: this.query })
              .then(() => {
                this.goodsList.forEach((item, index) => {
                  this.userSales += parseInt(item.user_earnings)
                })
              })
          }
          break
        case '现有商品':
          this._getShopExistGoods({ page: this.page, id: this.id, condition: this.query })
          break
        case '总销售额':
          if (this.status === 'shop') {
            this._getEarningDetail({ condition: this.query, page: this.page, start_time: this.start_time, end_time: this.end_time, id: this.id, status: 'shop' })
              .then(() => {
                this.goodsList.forEach((item, index) => {
                  this.shopSales += parseInt(item.payment)
                })
              })
          }
          break
        case '总收益':
          if (this.status === 'shop') {
            this._getEarningDetail({ condition: this.query, page: this.page, id: this.id, status: 'shop' })
              .then(() => {
                this.goodsList.forEach((item, index) => {
                  this.shopSales += parseInt(item.shop_earnings)
                })
              })
          }
          break
        default:
          this._getShopList(this.page, this.query)
      }
    },
    titleClick(index) {
      this.clear()
      switch (index) {
        case 0:
          this.cmpName = TableList
          this.title.splice(index + 1)
          this.tabName = ''
          this.placeholder = '请输入业务员姓名/手机号'
          break
      }
      switch (this.cmpName) {
        case TableList:
          this._getShopList(this.page)
          break
      }
    },
    handleNextPage(page) {
      this.page = page
      // this._getShopList(this.page, this.query)
      switch (this.tabName) {
        case '店员':
          this._getAssistantList({ page: this.page, id: this.id, condition: this.query })
          if (this.totalSale === 'assistantTotalSale') {
            this._getEarningDetail({ page: this.page, id: this.totalSale_id, status: 'user', condition: this.query })
              .then(() => {
                this.goodsList.forEach((item, index) => {
                  this.userSales += parseInt(item.user_earnings)
                })
              })
          }
          break
        case '现有商品':
          this._getShopExistGoods({ page: this.page, id: this.id, condition: this.query })
          break
        case '总销售额':
          if (this.status === 'shop') {
            this._getEarningDetail({ condition: this.query, page: this.page, start_time: this.start_time, end_time: this.end_time, id: this.id, status: 'shop' })
              .then(() => {
                this.goodsList.forEach((item, index) => {
                  this.shopSales += parseInt(item.payment)
                })
              })
          }
          break
        case '总收益':
          if (this.status === 'shop') {
            this._getEarningDetail({ condition: this.query, page: this.page, id: this.id, status: 'shop' })
              .then(() => {
                this.goodsList.forEach((item, index) => {
                  this.shopSales += parseInt(item.shop_earnings)
                })
              })
          }
          break
        default:
          this._getShopList(this.page, this.query)
      }
    },
    clear() {
      this.$refs.searchInput.clear()
    },
    _getShopList(page, condition) {
      getShopList(page, condition)
        .then(res => {
          if (res.code === ERR_OK) {
            console.log(res)
            this.shopList = res.data.data
            this.total = res.data.total
            this.pageSize = parseInt(res.data.per_page)
            this.currentPage = res.data.current_page
          }
        })
        .catch(err => {
          console.log(err)
        })
    },
    _getEarningDetail({ condition, page, start_time, end_time, id, status }) {
      return new Promise((resolve, reject) => {
        getEarningDetail({ condition, page, start_time, end_time, id, status })
          .then(res => {
            if (res.code === ERR_OK) {
              console.log(res)
              this.goodsList = res.data.data
              this.total = res.data.total
              this.pageSize = parseInt(res.data.per_page)
              this.currentPage = res.data.current_page
            }
            resolve()
          })
          .catch(err => {
            console.log(err)
            reject(err)
          })
      })
    },
    _getAssistantList({ page, condition, id }) {
      getAssistantList({ page, condition, id })
        .then(res => {
          if (res.code === ERR_OK) {
            console.log(res)
            this.assistantList = res.data.data
            this.total = res.data.total
            this.pageSize = parseInt(res.data.per_page)
            this.currentPage = res.data.current_page
          }
        })
        .catch(err => {
          console.log(err)
        })
    },
    _getShopExistGoods({ id, page, condition }) {
      getShopExistGoods({ id, page, condition })
        .then(res => {
          if (res.code === ERR_OK) {
            console.log(res)
            this.total = res.data.total
            this.pageSize = parseInt(res.data.per_page)
            this.currentPage = res.data.current_page
            this.exitsGoodsList = res.data.data
          }
        })
        .catch(err => {
          console.log(err)
        })
    }
    // 处理数据
    /* formatData(list) {
      const arr = []
      list.forEach((item, index) => {
        for (let i = 0; i <= 1; i++) {
          arr.push(item)
        }
      })
      return arr
    } */
  }
}
</script>
<style lang="scss" scoped>
@import "@/styles/el-button.scss";
@import "@/styles/el-pagination.scss";
.shop-wrapper {
  padding: 0 20px;
  box-sizing: border-box;
  min-height: 110vh;
  .content {
    .top {
      width: 100%;
      box-sizing: border-box;
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 10px 0;
      .title-wrapper {
        display: flex;
        align-content: center;
        .title {
          height: 44px;
          line-height: 44px;
          color: rgba(68, 68, 68, 1);
          font-size: 18px;
          font-family: Roboto;
          font-weight: bold;
          cursor: pointer;
        }
      }
    }
    .middle {
      display: flex;
      align-items: center;
      .totle {
        line-height: 26px;
        color: rgba(245, 108, 108, 1);
        font-size: 18px;
        text-align: left;
        font-family: Roboto;
        margin-right: 9px;
        font-weight: bold;
      }
      .input-cls {
        margin-right: 21px;
      }
    }
    .bottom {
      margin-top: 16px;
    }
  }
}
</style>

